<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  // const canvas = document.getElementById('canvas') as HTMLCanvasElement
  const ctx = canvas.getContext('2d')
  const presenter = navigator.ink.requestPresenter({ presentationArea: canvas })
  let move_cnt = 0
  let style = { color: 'rgb(0 255 0 / 100%)', diameter: 10 }

  function getRandomInt(min:number, max:number) {
    min = Math.ceil(min)
    max = Math.floor(max)
    return Math.floor(Math.random() * (max - min + 1)) + min
  }

  canvas.addEventListener('pointermove', async (evt) => {
    console.log(evt.pointerType)
    document.getElementById('text').innerText = evt.pointerType
    const pointSize = 10
    ctx.fillStyle = style.color
    ctx.fillRect(evt.pageX, evt.pageY, pointSize, pointSize)
    if (move_cnt == 20) {
      const r = getRandomInt(0, 255)
      const g = getRandomInt(0, 255)
      const b = getRandomInt(0, 255)

      style = { color: `rgb(${r} ${g} ${b} / 100%)`, diameter: 10 }
      move_cnt = 0
      document.getElementById('div').style.backgroundColor = `rgb(${r} ${g} ${b} / 60%)`
    }
    move_cnt += 1
    ;(await presenter).updateInkTrailStartPoint(evt, style)
  })

  window.addEventListener('pointerdown', () => {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
  })

  canvas.width = window.innerWidth
  canvas.height = window.innerHeight
})
</script>

<template>
  <canvas id="canvas" style="height: 50%"></canvas>
  <div id="div">Delegated ink trail should match the color of this div.</div>
  <p id="text"></p>
</template>

<style scoped>
div {
  background-color: rgb(0 255 0 / 100%);
  position: fixed;
  top: 1rem;
  left: 1rem;
}
</style>
